<template>
  <div class="form-box" style="width:600px; margin: 100px auto; border:1px solid #000">
    <form-create v-model="fApi" :rule="rule" :option="option" :value.sync="value"></form-create>
  </div>
</template>

<script>
export default {
  data() {
        return {
            //实例对象
            fApi: {},
            //表单数据
            value: {},
            //表单生成规则
            rule: [
               {
    "type": "rate",
    "field": "fa21lncfsn8n9",
    "title": "评分",
    "info": "",
    "_fc_drag_tag": "rate",
    "hidden": false,
    "display": true,
    "value": 0
  },
  {
    "type": "input",
    "field": "9115rj6v83wz",
    "title": "输入框",
    "info": "123123",
    "_fc_drag_tag": "input",
    "hidden": false,
    "display": true
  },
  {
    type:"slider",
    field:"slider",
    title:"滑块",
    value:[0,52],
    props:{
        min: 0,
        max: 100,
        range: true,
    }
},
  {
    "type": "checkbox",
    "field": "7pe5rj6v8u4o",
    "title": "多选框",
    "info": "",
    "effect": {
      "fetch": ""
    },
    "options": [
      {
        "value": "1",
        "label": "选项1"
      },
      {
        "value": "2",
        "label": "选项2"
      }
    ],
    "_fc_drag_tag": "checkbox",
    "hidden": false,
    "display": true
  },
  {
    "type": "FcRow",
    "children": [
      {
        "type": "col",
        "props": {
          "span": 7,
          "offset": 0,
          "push": 0,
          "pull": 0
        },
        "children": [
          {
            "type": "input",
            "field": "hc71lnc59mtsv",
            "title": "输入框",
            "info": "",
            "_fc_drag_tag": "input",
            "hidden": false,
            "display": true
          },
          {
            "type": "colorPicker",
            "field": "z8g1lnc5aqdq8",
            "title": "颜色选择器",
            "info": "",
            "_fc_drag_tag": "colorPicker",
            "hidden": false,
            "display": true
          },
          {
            "type": "input",
            "field": "lxs1lnc59swbm",
            "title": "输入框",
            "info": "",
            "_fc_drag_tag": "input",
            "hidden": false,
            "display": true
          }
        ],
        "_fc_drag_tag": "col",
        "hidden": false,
        "display": true
      }
    ],
    "_fc_drag_tag": "row",
    "hidden": false,
    "display": true
  }
],
            //组件参数配置
            option: {
                //表单提交事件
                onSubmit: function (formData) {
                    alert(JSON.stringify(formData))
                }
            }
        }
    }
}
</script>